$(function() {
	//热门推荐内容填充
	for (var i = 0; i < 4; i++) {
		var p_img = makeupJson[i].goodsList[0].Commodityurl;
		var p_name = makeupJson[i].goodsList[0].gname;
		var p_price = makeupJson[i].goodsList[0].newprice;
		var bditem = '';
		bditem = `
				<li>
					<div class="item">
						<div class="p-img">
							<a href="#"><img src="${p_img}" alt=""></a>
						</div>
						<div class="p-name">
							<a href="#">
								${p_name}
							</a>
						</div>
						<div class="p-price">
							￥${p_price}
						</div>
						<div class="p-btn">
							<a class="btn" href="#">立即购买</a>
						</div>
					</div>
				</li>
				`
		$('.bd ul').append(bditem);
	}
	//商家列表
	function brandx() {
		$('.warp_brand').html('');
		$(makeupJson).each(function(i, ele) {
			var brandname = makeupJson[i].brand;
			var brandid = makeupJson[i].id;
			var brandlogo = makeupJson[i].brandimg;
			var brandbox = '';
			brandbox = `
			<div class="brand_img_word"data-id=${brandid}>
				<a href="#">
					<img src="${brandlogo}" alt="">
					<span>${brandname}</span>
				</a>
			</div>
		`
			$('.warp_brand').append(brandbox);
		})
	}
	brandx();
	//点击品牌logo显示已选条件
	function brandz() {
		$('.brand_img_word').each(function(i, v) {
			$(this).click(function() {
				$('.xuanqu').html('');
				$('.brand-xuan').addClass('brand-xuan-x');
				var bra = makeupJson[i].brand;
				var sstr = '';
				sstr = `
				<div class="xuan-b">
					<div class="tle">
						品牌：<span class="bra">${bra}</span>
					</div>
					<div class="cha">
						X
					</div>
				</div>
			`
				$('.xuanqu').append(sstr);
				$('.warp_brand').html('');
				var braid = Number($(this).attr('data-id'));
				var mekind;
				$(makeupJson).each(function(i, ele) {
					if (ele.id == braid) {
						mekind = makeupJson[i];
					}
				})
				var brandbox = '';
				brandbox = `
				<div class="brand_img_word"data-id=${braid}>
					<a href="#">
						<img src="${mekind.brandimg}" alt="">
						<span>${mekind.brand}</span>
					</a>
				</div>
			`
				$('.warp_brand').append(brandbox);
				var mekbra = mekind.brand;
				var li = $('.exhAreaLi');
				$('.exhAreaUl').html('');
				var sz = [];
				$(beatudyData).each(function(i1, v) {
					var wdata;
					var ind;
					if (v.brand == mekbra) {
						ind = i1;
						sz.push(i1);
						wdata = beatudyData[ind];
						$('.exhAreaUl').append(li[ind]);
					}
				})
				// 切换图片
				$(sz).each(function(i, v) {
					$('.curr').on('mouseover', function() {
						var ind2 = $(this).index();
						var ind1 = $('.exhAWrap').index($(this).parents(
							'.exhAWrap'))
						$(this).parents('.exhAWrap').find('.exhA-img img').attr(
							'src', $(beatudyDataTwo)[sz[ind1]][ind2])

					})
				})
				event();
			})
		})
	}
	brandz();

	$('.undo').click(function() {
		$('.brand-xuan').removeClass('brand-xuan-x');
		brandx();
		brandz();
		Commodityrendering();
	})

	//点击切换图标加高父盒子高度
	$('.choose_open').click(function() {
		$(this).children('.icon-down').toggleClass('icon-up');
		$('.selector').toggleClass('selehen');
	})
	//多选图标 点击切换首字母选择区块
	$('.choose_more').click(function() {
		$('.warp_brand').toggleClass('disalln');
		$('.all_a_z').toggleClass('disallb');
		$('.zimu_list').toggleClass('disallb');
		$('.enter').toggleClass('disallb');
		$(this).children('.icon-plus').toggleClass('icon-pluse');
		$(this).find('.duo').toggleClass('disalln');

	})
	// 鼠标悬浮追加样式
	$('.a_z li').hover(function() {
		$(this).addClass('a_z_2')
		$(this).siblings().removeClass('a_z_2');
	})
	//首字母悬浮显示该字母下的品牌列表
	$('.a_z li').hover(function() {
		var aind = $('.a_z li').index($(this));
		$($('.zimu_list ul>li')[aind]).css('display', 'block');
		$($('.zimu_list ul>li')[aind]).siblings().css('display', 'none');

	})

	//多选 首字母查询 遍历追加
	//默认选中所有品牌
	var allbrandname = [];
	$(makeupJson).each(function(i, v) {
		var allbrand = makeupJson[i].firstletter;
		allbrandname.push(makeupJson[i].brand);
	})
	var ziucen = '';
	ziucen = `
		<li class="is_no" >
		</li>
		`;
	$('.zimu_list ul li').append(ziucen);
	var bletter = [];
	$(makeupJson).each(function(i) {
		bletter.push(makeupJson[i].firstletter);
	})
	$(allbrandname).each(function(i) {
		var isnocen = '';
		isnocen = `
					<div class="list">
					<a href="javascript:;" class="compareLink1">
					<input type="checkbox" class=""">
						<label class="exhA-label1" for="branno${i}"></a>
						<a href="javascript:;">${allbrandname[i]}</a>
					</div>
				`;
		$($('.is_no')[0]).append(isnocen);

	})
	var letter = [];
	$('.a_z li').each(function(i) {
		letter.push($(this).text());
	})

	$('.a_z li').each(function(i, v) {
		var aaa = $(this).text();
		$(bletter).each(function(i1, v1) {
			if (aaa == v1) {
				var isnocen = '';
				isnocen = `
							<div class="list">
								<a href="javascript:;" class="compareLink1">
									<input type="checkbox" class="comparison1" id="branno${i1}">
									<label class="exhA-label1" for="branno${i1}"></a>
									<a href="javascript:;">${allbrandname[i1]}</a>
							</div>
						`;
				$($('.is_no')[i]).append(isnocen);
			}
		})
	})

	//所有品牌中选中 该品牌的首字母列表下也选中
	$('.compareLink1 .comparison1').change(function() {
		if (this.checked) {
			$(this).next().addClass('exhA-labelShow1', true)
			$('.exhA-label1[for=' + $(this).attr('id') + ']').addClass('exhA-labelShow1', true);
		} else {
			$(this).next().removeClass('exhA-labelShow1')
			$('.exhA-label1[for=' + $(this).attr('id') + ']').removeClass('exhA-labelShow1');
		}
	})
	//判断有复选框被选中则显示确认按钮
	$('.compareLink1').on('click', function() {
		var flag = $('.comparison1').is(':checked')
		if (flag) {
			$('.yes_bt').css('display', 'block')
		} else {
			$('.yes_bt').css('display', 'none')
		}
	})

	//关闭按钮点击切换为品牌筛选
	$('.no_bt').click(function() {
		$('.warp_brand').toggleClass('disalln');
		$('.all_a_z').toggleClass('disallb');
		$('.zimu_list').toggleClass('disallb');
		$('.enter').toggleClass('disallb');
		$('.choose_more').children('.icon-plus').toggleClass('icon-pluse');
		$('.choose_more').find('.duo').toggleClass('disalln');
	})

	//确认按钮点击筛选所选品牌下的商品
	var liaaaa;
	$().ready(function() {
		liaaaa = $('.exhAreaLi');
	})
	$('.yes_bt').click(function() {
		var sstr = '';
		var brandbox = '';
		var ind;
		$('.exhAreaUl').html('');
		$('.comparison1').each(function(i, v) {
			if ($(this).prop('checked')) {
				var bval = $(this).parent().next().text();
				$('.brand-xuan').addClass('brand-xuan-x');
				$('.xuanqu').html('');
				sstr += `
					<div class="xuan-b">
						<div class="tle">
							品牌：<span class="bra">${bval}</span>
						</div>
						<div class="cha">
							X
						</div>
					</div>
				`
				$('.xuanqu').append(sstr);
				var mekind;
				$(makeupJson).each(function(i, ele) {
					if (ele.brand == bval) {
						mekind = makeupJson[i];
					}
				})
				$('.warp_brand').html('');
				brandbox += `
					<div class="brand_img_word"data-id=${1}>
						<a href="#">
							<img src="${mekind.brandimg}" alt="">
							<span>${mekind.brand}</span>
						</a>
					</div>
				`
				$('.warp_brand').append(brandbox);
				var mekbra = mekind.brand;
				$(beatudyData).each(function(i1, v) {
					if (v.brand == mekbra) {
						$('.exhAreaUl').append(liaaaa[i1]);
					}
				})
			}

		})
		$('.comparison1').each(function() {
			this.checked = false;
			$('.exhA-label1[for=' + $(this).attr('id') + ']').removeClass(
				'exhA-labelShow1');
			$('.yes_bt').css('display', 'none');
			$('.warp_brand').toggleClass('disalln');
			$('.all_a_z').toggleClass('disallb');
			$('.zimu_list').toggleClass('disallb');
			$('.enter').toggleClass('disallb');
			$('.choose_more').children('.icon-plus').toggleClass('icon-pluse');
			$('.choose_more').find('.duo').toggleClass('disalln');
		})
	})
	// 渲染展示区
	function Commodityrendering() {
		$('.exhAreaUl').html('');
		$(beatudyData).each(function(i, v) {
			$('.exhAreaUl').append($(
				'<li class="exhAreaLi" data-ind="' + i +
				'"><div class="exhAWrap"><div class="exhA-img"><a href="1232.html#' +
				i + '" class="imgt" data-ind=' +
				i + '><img src="' +
				v.src +
				'"></a></div><div class="sider"><ul></ul></div><div class="exhA-lie"><div class="exhA-price">' +
				v.price + '</div><div class="exhA-num">已售<em data-sid="' + i + '">' + v.num +
				'</em>件</div></div><div class="exhA-name"><a href="1232.html#' + i +
				'"class="titt" data-ind=' +
				i +
				' title="' +
				v
				.title + '">' + v.title +
				'</a></div><div class="exhA-store"><a href="javascript:;" title="' + v
				.store +
				'" class="store">' + v.store +
				'</a><a href="javascript:;" class="icon-kefu"></a></div><div class="label"></div><div class="exhA-operate"><a href="javascript:;" class="compareLink"><input type="checkbox" class="comparison"><label class="exhA-label" for=""></label>对比</a><a href="javascript:;" class="icon-aixin">收藏</a><a href="javascript:;" class="shop icon-shop">加入购物车</a></div></div></li>'
			))

		})

		// $(".exhAreaLi").click(function(v, i) {
		// 	console.log($('.exhAreaLi').index($(this)));
		// 	console.log(makeupJson[$('.exhAreaLi').index($(this))]);
		// })


		// 追加小图片
		$(beatudyDataTwo).each(function(i1, v) {
			$(this).each(function(i, v) {
				$($('.sider>ul')[i1]).append($('<li class="curr"><img src="' + v +
					'">'))
			})
		})
		// 切换图片
		$('.curr').on('mouseover', function() {
			var ind = $('.exhAWrap').index($(this).parents('.exhAWrap'))
			var ind2 = $(this).index()
			$(this).parents('.exhAWrap').find('.exhA-img img').attr('src', $(beatudyDataTwo)[
				ind][ind2])
		})
		event();
	}
	Commodityrendering();

	function event() {
		// 对比
		$('.compareLink').on('click', function() {
			$(this).toggleClass('compareLinkShow')
			$(this).find('.exhA-label').toggleClass('exhA-labelShow')
		})
		// 爱心
		$('.icon-aixin').on('click', function() {
			$(this).toggleClass('icon-aixinShow')
		})
	}
	// 展示区右边
	function exhAR() {
		$(exhAreaRData).each(function(i, v) {
			$('.exhARUl').append($(
				'<li class="exhARLi"><div class="exhARWrap"><div class="exhAR-img"><a href="javascript:;"><img src="' +
				v.src + '"></a></div><div class="exhAR-lie"><div class="exhAR-price">' +
				v
				.price +
				'</div></div><div class="exhAR-name"><a href="javascript:;" title="' +
				v.title + '">' + v.title + '</a></div><div class="exhAR-num">已售<em>' + v
				.num +
				'</em>件</div></div></li>'))
		})
	}
	exhAR();
	$('.takeBack').on('click', function() {
		$('.exhARUl').html('');
		$('.exhA-sec').toggleClass('exhA-secw')
		$('.exhAreaLi').toggleClass('exhAreaLiw')
		$('.exhAreaRight').toggleClass('exhAreaRightShow')
		$('.exhAreaRightSec').toggleClass('exhAreaRightSecShow')
		var flag = $('.exhAreaRight').attr('class').includes('exhAreaRightShow');
		if (flag == false) {
			exhAR()
		}
	})

	// 猜你喜欢
	$(clearfixData).each(function(i, v) {
		$('.clearfixUl').append($(
			'<li class="clearfixLi"><div class="clearfixWrap"><div class="clearfix-img"><a href="javascript:;"><img src="' +
			v.src + '"></a></div><div class="clearfix-lie"><div class="exhAR-price">' + v
			.price +
			'</div></div><div class="clearfix-name"><a href="javascript:;" title="' + v
			.title + '">' + v.title + '</a></div><div class="clearfix-num">已售<em>' + v.num +
			'</em>件</div></div></li>'))

		//大小图切换
		$('.small').click(function() {
			$(this).css('color', '#f24f24')
			$(this).prev().prev().css('color', '#8c8c8c')
			$('.exhAreaUl').toggleClass('exhAreaUl exhAreaUl-small');
			$('.exhAreaLi').toggleClass('exhAreaLi exhAreaLi-small');
			$('.exhAWrap').toggleClass('exhAWrap exhAWrap-small');
			$('.exhA-img').toggleClass('exhA-img exhA-img-small');
			$('.exhA-name').toggleClass('exhA-name exhA-name-small');
			$('.exhA-lie').toggleClass('exhA-lie exhA-lie-small');
			$('.exhA-price').toggleClass('exhA-price exhA-price-small');
			$('.sider').toggleClass('sider sider-small');

		})
		$('.big').click(function() {
			$(this).css('color', '#f24f24')
			$(this).next().next().css('color', '#8c8c8c')
			$('.exhAreaUl-small').toggleClass('exhAreaUl exhAreaUl-small');
			$('.exhAreaLi-small').toggleClass('exhAreaLi exhAreaLi-small');
			$('.exhAWrap-small').toggleClass('exhAWrap exhAWrap-small');
			$('.exhA-img-small').toggleClass('exhA-img exhA-img-small');
			$('.exhA-name-small').toggleClass('exhA-name exhA-name-small');
			$('.exhA-lie-small').toggleClass('exhA-lie exhA-lie-small');
			$('.exhA-price-small').toggleClass('exhA-price exhA-price-small');
			$('.sider-small').toggleClass('sider sider-small');

		})
	})
	//排序板块样式排他
	// $('.filterLi').mousemove(function() {
	// 	$(this).css('color', '#f24f24')
	// })
	// $('.filterLi').mouseout(function() {
	// 	$(this).css('color', '#555')
	// })
	// $('.filterLi').click(function() {
	// 	$(this).css('color', '#f24f24')
	// 	$(this).siblings().css('color', '#555')
	// })
	//默认排序
	$('.filterDefault').click(function() {
		$('.exhAreaUl').html('');
		setTimeout(function() {
			Commodityrendering();
		}, 100)
	})
	$('.filterReview').click(function() {
		$(this).find('.filterI').toggleClass('filterI1')
		$('.exhAreaUl').html('');
		Commodityrendering();
	})
	//销量排序
	var salshang = 0;
	$('.filterSalesVolume').click(function() {
		var liabc = $('.exhAreaLi');
		$(this).find('.filterI').toggleClass('filterI1')
		var salesarr = [];
		salshang++;
		$(liabc).each(function() {
			salesarr.push($(this).find('em').text());
			if (salshang % 2 == 0) {
				salesarr.sort(function(a, b) {
					return b - a;
				})
			} else {
				salesarr.sort(function(a, b) {
					return a - b;
				})
			}
		})
		salesarr = unlink(salesarr);
		var liarr = new Array;
		liarr = $(salesarr).map(function(i, v) {
			return $(liabc).filter(function(i1, v1) {
				return v == $(v1).find('em').text();
			})
		})
		$('.exhAreaUl').html('')
		$(liarr).each(function(i, v) {
			$('.exhAreaUl').append(liarr[i]);

		})
	})
	//价格排序
	var prishang = 0;
	$('.filterPrice').click(function() {
		var liabc = $('.exhAreaLi');
		$(this).find('.filterI').toggleClass('filterI1')
		var salesarr = [];
		prishang++;
		$(liabc).each(function() {
			salesarr.push(Number($(this).find('.exhA-price').text().substr(1)));
			if (prishang % 2 == 0) {
				salesarr.sort(function(a, b) {
					return b - a;
				})
			} else {
				salesarr.sort(function(a, b) {
					return a - b;
				})
			}
		})
		salesarr = unlink(salesarr);
		var liarr = new Array;
		liarr = $(salesarr).map(function(i, v) {
			return $(liabc).filter(function(i1, v1) {
				return v == Number($(v1).find('.exhA-price').text().substr(1));
			})
		})
		$('.exhAreaUl').html('')
		$(liarr).each(function(i, v) {
			$('.exhAreaUl').append(liarr[i]);
		})
	})

	function unlink(arr) {
		return arr.filter(function(item, index, arr) {
			return arr.indexOf(item, 0) === index;
		});
	}
	//区间筛选
	$('.pricerange input').on('focus', function() {
		$('.pricerange .emptydetermine').css('display', 'block')
	})
	$('.pricerange .emptydetermine .empty').click(function() {
		$('.pricerange input').each(function() {
			$(this).val('');
		});
		$('.pricerange .emptydetermine').css('display', 'none')
	})
	$('.pricerange .emptydetermine .confirm').click(function() {
		var txtone = Number($('.prione').val());
		var txttwo = Number($('.pritwo').val());

		var salesarr = [];
		$(liaaaa).each(function() {
			salesarr.push(Number($(this).find('.exhA-price').text().substr(1)));
		})
		var liarr = new Array;
		liarr = $(salesarr).map(function(i, v) {
			return $(liaaaa).filter(function(i1, v1) {
				return Number($(v1).find('.exhA-price').text().substr(1)) >= txtone &&
					Number($(v1).find('.exhA-price').text().substr(1)) <= txttwo;
			})
		})
		$('.exhAreaUl').html('')
		$(liarr).each(function(i, v) {
			$('.exhAreaUl').append(liarr[i]);
		})
		$('.pricerange .emptydetermine').css('display', 'none')
	})
})
